<template>
    <div class="CardItem" :style="style">
        <div class="header">
            <div class="left">
                <h3 class="title">{{ data.title }}</h3>

                <el-popover
                    class="abc"
                    placement="top-start"
                    width="auto"
                    trigger="hover">
                    <img slot="reference" v-if="data.tips" src="../../../assets/dashboard/question.png" alt="">
                    <div class="card-content" v-html="data.tips"></div>
                </el-popover>
            </div>
            <div class="right" v-if="data.time || data.btn">
                <img v-if="data.time" src="../../../assets/dashboard/refresh.png" alt="" @click="refreshData">
                <div v-html="data.time || data.btn"></div>
            </div>
        </div>

        <slot></slot>

    </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
    name: 'CardItem',
    props: {
        flex: Number,
        min_width: Number,
        data: Object
    },
    mounted () {
        this.$store.commit('setCardMounted', true)
    },
    data () {
        return {
            style: `
            flex: ${ this.flex || 1 };
            min-width: ${ this.min_width }px
            `,
        }
    },
    methods: {
        refreshData() {
            this.$store.commit('setDataRefresh', true)
        }
    }
}
</script>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.CardItem {
    background-color: white;
    display: flex;
    flex-direction: column;
    margin: 12px;
    border-radius: 5px;
    padding: 23px 20px;
    color: #2A2929;

    .header {
        height: 21px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;

        > div {
            display: flex;
            align-items: center;

            img {
                margin: 0 6px;
                cursor: pointer;
            }
        }

        .left {
            .title {
                font-size: 16px;
                font-weight: bold;
            }

            img {
                width: 20px;
                margin-top: 5px;
            }
        }

        .right {
            div {
                font-size: 14px;
                color: #818693;
            }

            img {
                width: 12px;
            }
        }
    }


}
</style>

<style>
    .card-content {
        line-height: 28px;
        color: #818693;
        font-size: 14px;
    }
</style>
